<!-- 人员类 -->
<template>
  <div class="personnel">
    <el-row>
      <el-col :span="4" style="border: 1px solid #eee; border-right: none">
        <radioOrgTree @init="init" ref="dialogRadioOrgTree" />
      </el-col>
      <el-col
        :span="5"
        style="overflow-y: scroll"
        :style="{ height: heightCard }"
      >
        <el-card
          class="box-card"
          style="overflow-y: scroll"
          :style="{ height: heightCard }"
        >
          <h3>人员列表</h3>
          <div style="display: flex; margin-top: 10px">
            <el-input
              style="width: 250px"
              v-model="searchValue"
              placeholder="请输入姓名或身份证号"
            ></el-input>
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="hanldSearch"
              >搜索</el-button
            >
          </div>
          <div>
            <el-card
              class="cardHoverList"
              shadow="hover"
              v-for="(item, index) in tableData"
              :key="index"
              :class="{ 'card-highlight': index === selectedCardIndex }"
              @click.native="hanldClickCard(item, index)"
            >
              <div
                style="
                  font-weight: bolder;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                <font>{{ item.xingming }}</font> :
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.sfzh"
                  placement="top-start"
                >
                  <font>{{ item.sfzh }}</font>
                </el-tooltip>
              </div>
              <p>{{ item.zhiwu_quancheng }}</p>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-col
        :span="15"
        style="overflow-y: scroll"
        :style="{ height: heightCard }"
      >
        <el-card class="box-card" :style="{ height: heightCard }">
          <div
            style="
              height: 60px;
              margin-right: 15px;
              margin-bottom: 10px;
              border: 1px solid #eee;
              background: #fff;
              line-height: 55px;
              box-shadow: 5px 5px 5px #ddd;
            "
          >
            <div style="float: left"></div>
            <div style="float: right">
              <span
                @click="switchDisplay('list', 'activeList')"
                :class="{ active: isActiveList }"
                style="
                  display: inline-block;
                  font-size: 18px;
                  margin-right: 20px;
                "
                ><i class="el-icon-s-operation" style="margin-right: 8px"></i
                >精简列表</span
              >
              <span
                @click="switchDisplay('table', 'activeTable')"
                :class="{ active: isActiveTable }"
                style="
                  display: inline-block;
                  font-size: 18px;
                  margin-right: 30px;
                "
                ><i class="el-icon-menu" style="margin-right: 8px"></i
                >表格</span
              >
              <el-button
                style="
                  margin-right: 50px;
                  margin-left: 20px;
                  width: 100px;
                  height: 40px;
                "
                type="danger"
                plain
                @click="tableDel()"
                >删除</el-button
              >
            </div>
          </div>

          <div
            v-if="displayMode === 'list'"
            :style="{ height: heightList }"
            class="list"
          >
            <div
              class="cardHoverTableList"
              v-for="(item, index) in personnelData"
              :key="index"
              :style="getStyleByTagAutoFlag(item.TAG_AUTO_FLAG)"
              @click="hanldClickTableCard(item, index)"
            >
              <h3 style="margin: 10px 0px 0px 10px">{{ item.TAG_NAME }}</h3>
              <p>
                <font class="nameTitle">标签编码：</font>{{ item.TAG_CODE }}
              </p>
              <p v-if="item.TAG_AUTO_FLAG === '1'">
                <font class="nameTitle">标记类型：</font>自动标签标记
              </p>
              <p v-if="item.TAG_AUTO_FLAG === '2'">
                <font class="nameTitle">标记类型：</font>手动标签标记
              </p>
            </div>
          </div>

          <div v-if="displayMode === 'table'" class="table">
            <vxe-table
              border
              id="person_id"
              header-align="center"
              ref="mytable"
              highlight-current-row
              highlight-hover-row
              :loading="loading"
              :height="heightY"
              :export-config="exportConfig"
              :data="personnelData"
              :custom-config="{ storage: true }"
              @checkbox-all="selectAllEvent"
              @checkbox-change="selectChangeEvent"
            >
              <vxe-table-column
                field="xuanzhong"
                type="checkbox"
                width="80"
                align="center"
              />
              <vxe-table-column
                type="html"
                field="TAG_NAME"
                show-overflow="tooltip"
                title="标签名称"
                width="370"
                align="center"
                sortable
              ></vxe-table-column>
              <vxe-table-column
                field="TAG_CODE"
                title="标签编码"
                show-overflow="tooltip"
                width="350"
                align="center"
                sortable
              ></vxe-table-column>
              <vxe-table-column
                title="标记类型"
                show-overflow="tooltip"
                width="350"
                align="center"
                sortable
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.TAG_AUTO_FLAG === '1'"
                    >自动标签标记</span
                  >
                  <span v-else-if="scope.row.TAG_AUTO_FLAG === '2'"
                    >手动标签标记</span
                  >
                </template>
              </vxe-table-column>
            </vxe-table>
            <div style="width: 100%; float: left">
              <vxe-pager
                background
                align="right"
                :current-page.sync="pages.currentPageTwo"
                :page-size.sync="pages.pageSizeTwo"
                :total="pages.totalResultTwo"
                :page-sizes="[20, 50, 100, 500, 1000]"
                :layouts="[
                  'PrevJump',
                  'PrevPage',
                  'JumpNumber',
                  'NextPage',
                  'NextJump',
                  'Sizes',
                  'FullJump',
                  'Total',
                ]"
                @page-change="handlePageChange"
              >
              </vxe-pager>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  tagResourceListAll,
  tagResourceTableDelete,
} from "@/api/bianqian/tagApi";
import store from "@/store";
import radioOrgTree from "./componentsConsult/radioOrgTreelazy";
import { getPersonByOrg } from "@/api/datacentersz/person/person";
export default {
  components: { radioOrgTree },
  data() {
    return {
      exportConfig: { modes: ["current", "selected"] },
      heightY: window.innerHeight - 270 + "px",
      loading: false,
      allAlign: "center",
      heightCard: window.innerHeight - 132 + "px",
      heightList: window.innerHeight - 240 + "px",
      jg_id: "",
      pages: {
        pageSize: 9999999,
        currentPage: 1,
        totalResult: 0,
        currentPageTwo: 1,
        pageSizeTwo: 20,
        totalResultTwo: 0,
      },
      searchValue: "",
      searchValue2: "",
      tableData: [],
      personnelData: [],
      timeUsed: "",
      searchArgs: "1",
      searchManagerType: [],
      isEnableEditPerson: "",
      multipleSelection: [],
      currentRow: null,
      selectedNode: {},
      displayMode: "list", // 初始显示模式为精简列表
      isActiveList: true,
      isActiveTable: false,
      cardList: {},
      cardTableList: null,
      selectedCardIndex: 0,
      xingming: "",
      sfzh: "",
    };
  },
  mounted() {
    this.isEnableEditPerson = store.getters.userInfo.isEnableEditPerson;
  },
  methods: {
    init(node) {
      this.jg_id = node.id || "";
      const userInfo = JSON.parse(sessionStorage.getItem(`userInfo`)) || {};
      let searchManagerType = "";
      if (this.searchManagerType.length != 0) {
        for (let item of this.searchManagerType) {
          searchManagerType += item + ",";
        }
        searchManagerType = searchManagerType.substring(
          0,
          searchManagerType.length - 1
        );
      }
      if (node === "init") {
        this.loading = false;
      } else if (node === "select") {
        if (this.selectedNode === null || this.selectedNode === "") {
          let data = this.$refs.dialogRadioOrgTree.node_had.childNodes[0].data;
          this.selectedNode = {
            label: data.jg_mingcheng,
            id: data.jg_id,
            code: data.jg_bianma,
            children: [],
            parentId: data.jg_shangji,
            type: data.jg_leixing,
            icon: data.icon,
            shortName: data.jgjc,
          };
        }
        var han = /^[\u4e00-\u9fa5]+$/;
        var cardId = /\d/g;
        var vals = this.searchValue.trim(); //获取输入input中的val
        if (han.test(vals)) {
          //test()方法表示是否匹配，返回值为true 成功，false 匹配失败
          this.xingming = this.searchValue.trim();
        } else {
          if (cardId.test(vals)) {
            this.sfzh = this.searchValue.trim();
          } else {
            this.xingming = this.searchValue.trim();
          }
        }

        let personJsons = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          isEnableEditOrg: userInfo.isEnableEditOrg.toString(),
          system: "datacenter",
          is_contains_org_child: "0",
          data: {
            page: this.pages.currentPage,
            rows: this.pages.pageSize,
            glzt_dm: this.searchArgs,
            jg_id: this.selectedNode.id,
            gllb_dm: searchManagerType,
            xingming: this.xingming,
            sfzh: this.sfzh,
          },
        };
        getPersonByOrg(personJsons)
          .then((response) => {
            if (response.result) {
              this.pages.totalResult = response.resultdata.count; // 设置总记录数
              this.tableData = response.resultdata.data; // 填充列表数据
              this.timeUsed = response.resultdata.timeUsed;
              if (this.tableData.length > 0) {
                this.hanldClickCard(this.tableData[0], 0);
              } else {
                console.log("暂无数据可供展示");
              }
            } else {
              this.tableData = [];
              this.$message.error(response.message);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
            this.$message.error("内部错误！");
          });
      } else {
        if (this.selectedNode !== node) {
          this.pages.currentPage = 1;
        }
        this.selectedNode = node;
        let personJsons = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          isEnableEditOrg: userInfo.isEnableEditOrg.toString(),
          system: "datacenter",
          is_contains_org_child: "0",
          data: {
            page: this.pages.currentPage,
            rows: this.pages.pageSize,
            glzt_dm: this.searchArgs,
            jg_id: node.id,
            gllb_dm: searchManagerType,
          },
        };
        getPersonByOrg(personJsons)
          .then((response) => {
            if (response.result) {
              this.pages.totalResult = response.resultdata.count; // 设置总记录数
              this.tableData = response.resultdata.data; // 填充列表数据
              this.timeUsed = response.resultdata.timeUsed;
              if (this.tableData.length > 0) {
                this.hanldClickCard(this.tableData[0], 0);
              } else {
                console.log("暂无数据可供展示");
              }
            } else {
              this.tableData = [];
              this.$message.error(response.message);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
            this.$message.error("内部错误！");
          });
      }
    },
    getStyleByTagAutoFlag(flag) {
      let backgroundColor;
      if (flag === "1") {
        backgroundColor = "linear-gradient(#a1c4fd, #c2e9fb,#e6effb)";
      } else if (flag === "2") {
        backgroundColor = "linear-gradient(#66bb6a, #a5d6a7,rgb(187 243 134))";
      }
      return {
        background: backgroundColor,
      };
    },
    hanldSearch() {
      this.init("select");
    },
    switchDisplay(mode, activeClassName) {
      if (mode === "list") {
        this.multipleSelection = [];
        this.cardTableList = null;
        this.isActiveList = true;
        this.isActiveTable = false;
      } else if (mode === "table") {
        this.multipleSelection = [];
        this.cardTableList = null;
        this.isActiveList = false;
        this.isActiveTable = true;
      }

      this.displayMode = mode;
    },
    selectAllEvent({ checked, records }) {
      this.multipleSelection = [];
      this.multipleSelection = records;
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = [];
      this.multipleSelection = records;
    },
    hanldClickCard(item, index) {
      // this.$nextTick(() => {
      this.cardList = item;
      console.log(this.cardList, "cardlist");
      this.selectedCardIndex = index;
      let personJsons = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        rows: this.pages.pageSizeTwo,
        page: this.pages.currentPageTwo,
        idCard: this.cardList.sfzh, //传身份证号
        orgOrPer: "B",
      };
      tagResourceListAll(personJsons)
        .then((response) => {
          if (response.result) {
            this.personnelData = response.resultdata.resultdata.data;
            this.pages.totalResultTwo = response.resultdata.resultdata.count;
          } else {
            this.personnelData = [];
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.$message.error("内部错误！");
        });
      // });
    },
    hanldClickTableCard(item, index) {
      this.$nextTick(() => {
        this.cardTableList = item;
      });
    },
    tableDel() {
      let dataList = this.multipleSelection.length;
      if (dataList !== 0 || this.cardTableList !== null) {
        this.$confirm("确定删除当前行?", "操作提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const params = {
            userId: store.getters.user_id.toString(),
            userName: store.getters.userName.toString(),
            token: store.getters.token.toString(),
            list: [],
          };
          if (this.multipleSelection.length > 0) {
            // 如果有选中的行，则将选中的行数据放入 list 中
            params.list = this.multipleSelection.map((row) => ({ ...row }));
          } else if (this.cardTableList !== "") {
            params.list = [this.cardTableList];
          }

          tagResourceTableDelete(params).then((response) => {
            if (response.result) {
              this.$message({
                type: "success",
                message: response.resultdata,
              });
              this.init(this.selectedNode);
            } else {
              this.$message({
                type: "error",
                message: response.resultdata,
              });
            }
          });
        });
      } else {
        // 如果既没有选中的行，也没有多选的行，则提示用户至少选择一行
        this.$message({
          type: "warning",
          message: "请至少选择一条要删除的数据！",
        });
      }
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pages.currentPageTwo = currentPage;
      this.pages.pageSizeTwo = pageSize;
      this.hanldClickCard(this.cardList, 0);
    },
    handlePageChange2({ currentPage, pageSize }) {
      this.pages.currentPage = currentPage;
      this.pages.pageSize = pageSize;
      this.init(this.selectedNode);
    },
  },
};
</script>

<style scoped>
.personnel {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.cardHoverList {
  margin-top: 10px;
  /* height: 90px; */
}
.active {
  color: #428fd8;
  font-size: 18px;
}
.list {
  display: flex;
  flex-wrap: wrap; /* 添加换行属性 */
  overflow-y: scroll;
  margin-top: 30px;
}
.cardHoverTableList {
  width: calc(33% - 20px); /* 每个卡片占据四分之一宽度，减去左右两边的间距 */
  height: 150px;
  margin: 10px; /* 四周留有间距 */
  border-radius: 10px;
}
.cardHoverTableList span {
  display: inline-block;
  writing-mode: vertical-lr; /* 文字竖向排列 */
  border-right: 1px solid #ccc;
  float: left;
  font-size: 20px;
}
.cardHoverTableList p {
  font-size: 17px;
  margin-top: 10px;
}
.card-highlight {
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb, #e6effb);
  color: #409eff;
}
.cardTable-highlight {
  background-color: #b3d8ff;
  color: #409eff;
}
.nameTitle {
  font-size: 14px;
  font-weight: bolder;
  margin: 10px 0px 0px 10px;
}
</style>